<template>
    <div class="form-page">
        <div class="form-page-card">
            <div v-show="!isPutPaper">
                <add-paper-box
                    :paper-props-form="paperForm"
                    :save-name="saveText"
                    :is-show-btn="true"
                    :chapter-props-form="chapterForm"
                    :add-style-btn="addBtn"
                    @questionContent="operateQuestionContent"
                    @clear-question-box-f="clearBox"
                    @addStyleContent="updateAddStyle"
                ></add-paper-box>
            </div>
            <div v-show="true">
                <el-form
                    ref="dataForm"
                    :model="dataForm"
                    :inline="true"
                    label-width="10em"
                    class="data-form">
                    <div
                        class="form-item xy-start al-str"
                        style="">
                        <div class="title">试题信息</div>
                        <div
                            class="yx-start al-start data"
                            align="center">
                            <div class="childrenDiv">
                                <el-button type="primary" icon="el-icon-plus" @click="addBigQuestionType">添加大题型
                                </el-button>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <!-- 题型结构动态-->
        <div v-for="(item,index) in quTypeItemsSort" :key="index">
            <div class="form-question-card">
                <!-- 试题相关盒子-->
                <div class="question-box">
                    <!-- 题型结构-->
                    <div class="box-type">
                        <div class="type-title divs">
                            <div class="type-name">{{ item.name }}</div>
                            <div class="type-btn-icon">
                                <span>{{ item.score === null ? "" : item.score + " 分" }}</span>
                                <i class="el-icon-edit" @click="editQuestionType(index,item)"></i>
                                <i class="el-icon-delete" @click="deleteQuestionType(index,item)"></i>
                                <span class="fontSize5">
                                    <i v-if="item.isShow" class="el-icon-arrow-up"
                                       @click="openQuestionType(index)">展开</i>
                                    <i v-else class="el-icon-arrow-down" @click="putAwayQuestionType(index)">收起</i>
                                </span>
                            </div>
                        </div>
                        <div v-if="!item.isShow">
                            <div class="type-desc divs">
                                {{ item.remark }}
                            </div>
                            <!-- 大题添加选项-->
                            <div class="divs">
                                <question-btn-box :index="index" :index1="-1" size="medium"
                                                  @open-question-dialog="openAddDialog(arguments)"></question-btn-box>
                            </div>
                        </div>
                    </div>
                    <div v-show="!item.isShow">
                        <!-- 试题盒子-->
                        <div v-for="(question,index1) in item.quBoxItems" :key="question.id">
                            <show-question-box :question="question" :index1="index1" :index="index"
                                               :is-show-btn="true"
                                               @open-question-dialog="openAddDialog(arguments)"
                                               @edit-question-dialog="editDialog(arguments)"
                                               @operate-question="operateQuestion(arguments)"
                            ></show-question-box>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 试题弹出框 -->
        <add-question-box
            ref="addDialog"
            :question-type="addQuestionType"
            :q-type-array="qTypeNameArray"
            :edit-question-text="addQuestionText"
            @edit-qu-list="submitQuestion"
        ></add-question-box>
        <!-- 题型结构弹出框 -->
        <el-dialog
            :title="isQuTypeText"
            :visible.sync="questionTypeDialog"
            width="40%">
            <el-form ref="questionTypeForm"
                     :model="questionTypeForm"
                     :rules="questionTypeRules"
                     label-width="200px"
                     class="add-ques-form"
                     width="100%">
                <el-form-item label="题型名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="questionTypeForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="题型描述" :label-width="formLabelWidth" prop="desc">
                    <el-input v-model="questionTypeForm.desc" :autosize="{ minRows: 4, maxRows: 10}"
                              type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="questionTypeDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveQuestionType('questionTypeForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 引入原始组件
// 引入核心样式和主题样式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import {
    fetchPaperId,
} from "@/api/exam";
import {questionComponents} from "@/views/models/exam/questionBase/question/mixins/question";
import AddQuestionBox from "@/views/models/exam/questionBase/question/components/AddQuestionBox";
import AddPaperBox from "@/views/models/exam/questionBase/question/components/AddPaperBox";
import ShowQuestionBox from "@/views/models/exam/questionBase/question/components/ShowQuestionBox";
import QuestionBtnBox from "@/views/models/exam/questionBase/question/components/QuestionBtnBox";

export default {
    name: "AddQuestionIndex",
    components: {QuestionBtnBox, ShowQuestionBox, AddPaperBox, AddQuestionBox},
    mixins: [questionComponents],
    data() {
        return {
            selectVl: "",
            focus: false,
            over: false,
            optionNumber: "A",
            inputType: "text",
            imageBase64: null,
            quill: null,
            dataForm: {},
            isPaper: true,
            isPutPaper: false,
            saveBtnTxt: "收起试卷信息",
            saveText: "完成保存",
            isShowBtn: true,// 是否显示操作按钮
            isSingleChoice: false,
            isMultipleChoice: false,
            isCompletionChoice: false,
            isJudgmentChoice: false,
            isQuestionChoice: false,
            isCombinationChoice: false,
            part: "一、",
            totalScore: 0,
            moduleTitle: "单选题",
            qType: "单选题",
            addBtn: true,
            questionTypeDialog: false,
            addQuestionDialog: false,
            options1: [
                {
                    label: "",
                    value: ""
                }
            ],
            optionRadio: "1",
            isHide: false,
            isCompHide: false,
            isHideQtype: false,
            upText: "收起",
            comText: "收起",
            drawer: false,
            direction: "rtl",
            qtypeIndex: 0,
            qtypeChildIndex: -1,
            qtypeChildChildIndex: -1,
            questionForm: {},
            addStyle: "0",
            isEditBigQuType: false,
            isQuTypeText: "添加大题型",
            isCombination: false,
        };
    },
    computed: {
        imageUrl() {
            return this.imageBase64;
        },
        placeholderCom() {
            if (this.inputType === "text") {
                return "请输入选项";
            } else if (this.inputType === "title") {
                return "请输入题目";
            } else if (
                this.inputType === "textarea" &&
                (this.qType === "简答题" || this.qType === "填空题")
            ) {
                return "请输入答案";
            } else {
                return "试题解析（选填 限500字）";
            }
        },
    },
    watch: {},
    created() {

    },
    mounted() {
        this.initData();
    },
    methods: {
        initData() {
            if (this.$route.query.paperId) {
                if (this.$route.query.type === "see") {
                    this.isShowBtn = false;
                } else {
                    this.saveText = "编辑完成";
                    this.isShowBtn = true;
                    this.addBtn = false;
                }
                fetchPaperId({id: this.$route.query.paperId}).then(res => {
                    this.xrQuestion(res, 0);
                });
            }
        },
        assembleStem(data) {
            this.questionForm = data
        },
        operateQuestionContent(res) {
            // this.addStyle = "1";
            if (res.content !== null) {
                this.xrQuestion(res, 1);
            }
        },
        // 修改添加类型
        updateAddStyle(vl){
            this.addStyle = vl;
        },
        clearBox() {
            this.quTypeItems = [];
        },
        // 打开添加试题框
        openAddDialog(data) {
            this.isEdit = false;
            this.addQuestionType = data[0];
            this.qtypeIndex = data[1];
            this.qtypeChildIndex = data[2];
            this.initQuestionForm();
            if (data[3] !== null) {
                this.questionForm.sourceId = data[3];
                this.questionForm.question = data[4];
                this.isCombination = true;
            } else {
                this.isCombination = false;
            }
            this.addTypeText(data[0]);
            this.findQType(this.addQuestionType);
            this.$refs.addDialog.openDialog(this.questionForm)
        },
        editDialog(data) {
            this.editQuestionDialog(data);
            if (data[4] !== undefined && data[4] !== null) {
                this.questionForm.question = data[4];
                this.questionForm.sourceId = data[4].id;
            }else {
                this.questionForm.sourceId = null
            }
            this.$refs.addDialog.openDialog(this.questionForm)
        }
    },
};
</script>

<style lang="scss" scoped>
.form-page {
    .qu-dialog {
        width: 100%;
        height: 460px;
    }

    .divs {
        margin-top: 0.6em;
    }

    .form-page-card {
        background-color: #fff;
        border-radius: 4px;
    }

    .form-question-card {
        margin-top: 2px;
        background-color: #fff;
        border-radius: 4px;

        .question-box {
            text-align: left;
            padding: 10px 28px 33px 24px;
            font-size: 16px;

            .box-type {
                .type-title {
                    display: flex;

                    .type-name {
                        width: 86%;
                    }

                    .type-btn-icon {
                        color: #48c4ff;

                        i {
                            margin-left: 12px;
                            cursor: pointer;
                        }

                        margin-left: 1em;
                    }
                }

                .type-desc {
                    color: #505353;
                    font-size: 14px;
                    line-height: 20px;
                    margin-top: 1em;
                }
            }
        }
    }

    .form-item .data {
        display: flex;
    }
}

.form-page {
    .foo-save {
        padding: 1em 1em 1em 2em;
    }

    .foo-add {
        padding: 1em 2em 2em 2em;
    }

    .add-ques-form ::v-deep {
        .el-select {
            width: 100%;
        }
    }
}

.childrenDiv {
    margin-top: 6px;
    height: 55px;
}

.el-form-item__label {
    width: 6em;
}

.upload {
    margin-top: 60px;
    margin-left: 120px;
}

.import {
    margin-top: 30px;
    margin-left: 270px;
}

.el-radio-group {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    font-size: 0;
    margin-left: 50px;
}
</style>

<style>
.el-drawer.rtl {
    overflow: scroll;
}
</style>
